<template>
  <div>
    <Echart
      id="centreLeft2Chart"
      ref="centreLeft2ChartRef"
      :options="options"
      width="100%"
      height="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart';
export default {
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.initChart(newData)
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
    
  },
  methods: {
    initChart(newData){
      let deepCloneObj = this.deepClone(newData)
       var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
              var geoCoord = deepCloneObj.geoCoordMap[data[i].name];
              if (geoCoord) {
                  res.push({
                      name: data[i].name,
                      value: geoCoord.concat(data[i].value)
                  });
              }
          }
          return res;
        };
        this.options = {
          tooltip: {
            trigger: 'item',
            textStyle: {
              fontSize: 14,
              lineHeight: 22,
            },
            position: point => {
              // 固定在顶部
              return [point[0] + 50, point[1] - 20];
            },
            // 如果需要自定义 tooltip样式，需要使用formatter
            /*
              formatter: params => {
                return `<div style=""> ... </div>`
              }
            */
          },
          // // 底部背景
          geo: {
            show: true,
            map: 'hb',
            roam: true,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            itemStyle: {
              normal: {
                  color: 'red',
                  areaColor: 'rgba(19,54,162, .5)',
                  borderColor: 'rgba(0,242,252,.3)',
                  borderWidth: 1,
                  shadowBlur: 7,
                  shadowColor: '#00f2fc',
                },
                emphasis: {
                  areaColor: '#4f7fff',
                  borderColor: 'rgba(0,242,252,.6)',
                  borderWidth: 2,
                  shadowBlur: 10,
                  shadowColor: '#00f2fc',
              },
            },
          },
          series: [
            {
              name: '指标',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(deepCloneObj.data),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#F4E925'
                  }
              }
            },
            {
              name:'指标',
              type: 'map',
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              roam: true,
              label: {
                formatter: params => `${params.name}`,
                show: false,
                position: 'insideRight',
                textStyle: {
                  fontSize: 14,
                  color: '#efefef',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },
              },
              data: deepCloneObj.data,
            },
            {
              name: '指标Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(deepCloneObj.data.sort(function(a, b) {
                return b.value - a.value;
              }).slice(0, 10)),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#F4E925',
                      shadowBlur: 10,
                      shadowColor: '#05C3F9'
                  }
              },
              zlevel: 1
            },
          ],
        };
        // 重新选择区域
        // this.handleMapRandomSelect();
    },
    isArray(arr) {
      return Object.prototype.toString.call(arr) === '[object Array]';
    },
    // 深度克隆
    deepClone(obj) {  
        if(typeof obj !== "object" && typeof obj !== 'function') {
            return obj;        //原始类型直接返回
        }
        var o = this.isArray(obj) ? [] : {}; 
        for(let i in obj) {  
            if(Object.prototype.hasOwnProperty.call(obj, i)){ 
                o[i] = typeof obj[i] === "object" ? this.deepClone(obj[i]) : obj[i]; 
            } 
        } 
        return o;
    },
    // 开启定时器
    startInterval() {
      const _self = this;
      // 应通过接口获取配置时间，暂时写死5s
      const time = 2000;
      if (this.intervalId !== null) {
        clearInterval(this.intervalId);
      }
      this.intervalId = setInterval(() => {
        _self.reSelectMapRandomArea();
      }, time);
    },
    // 重新随机选中地图区域
    reSelectMapRandomArea() {
      const length = 9;
      this.$nextTick(() => {
        const map = this.$refs.centreLeft2ChartRef.chart;
        let index = Math.floor(Math.random() * length);
        while (index === this.preSelectMapIndex || index >= length) {
          index = Math.floor(Math.random() * length);
        }
        map.dispatchAction({
          type: 'mapUnSelect',
          seriesIndex: 0,
          dataIndex: this.preSelectMapIndex,
        });
        map.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index,
        });
        map.dispatchAction({
          type: 'mapSelect',
          seriesIndex: 0,
          dataIndex: index,
        });
        this.preSelectMapIndex = index;
      });
    },
    handleMapRandomSelect() {
      this.$nextTick(() => {
        const map = this.$refs.centreLeft2ChartRef.chart;
        const _self = this;
        setTimeout(() => {
          _self.reSelectMapRandomArea();
        }, 0);
        // 移入区域，清除定时器、取消之前选中并选中当前
        map.on('mouseover', function (params) {
          clearInterval(_self.intervalId);
          map.dispatchAction({
            type: 'mapUnSelect',
            seriesIndex: 0,
            dataIndex: _self.preSelectMapIndex,
          });
          map.dispatchAction({
            type: 'mapSelect',
            seriesIndex: 0,
            dataIndex: params.dataIndex,
          });
          _self.preSelectMapIndex = params.dataIndex;
        });
        // 移出区域重新随机选中地图区域，并开启定时器
        map.on('globalout', function () {
          _self.reSelectMapRandomArea();
          _self.startInterval();
        });
        this.startInterval();
      });
    },
  },
};
</script>
